/*
 * @Description: 活动说明弹框
 * @Author: kanglin
 * @Date: 2018-07-20 10:19:55
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
        @pad-radio: 10rem/1536;
        .v-lucky-money-modal{
            // position: fixed;
            // top: 0;
            // bottom: 0;
            // right: 0;
            // left: 0;

            .mask{
                position: fixed;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                background: rgba(128,128,128,.2);
            }
            .modal{
                position: fixed;
                width: 1076*@pad-radio;
                top: 50%;
                left: 50%;
                transform: translateY(-50%);
                margin-left: -1076/2*@pad-radio;
            }

            .modal-header{
                text-align: center;
                color: #ffffff;
                font-size: 36 *@pad-radio;
                line-height: 110*@pad-radio;
                line-height:  110*@pad-radio;
                background: #e75384;
                border-radius: 30*@pad-radio 30*@pad-radio 0 0;
            }

            .modal-body{
                background: #ffffff;
                border-radius: 0 0 30*@pad-radio 30*@pad-radio;
                padding: 90*@pad-radio 70*@pad-radio;
                // height: 710*@pad-radio;
            }

            .fold-enter-active {
                animation-name: fold-in;
                animation-duration: .2s;
            }
            .fold-leave-active {
                animation-name: fold-out;
                animation-duration: .2s;
            }
            @keyframes fold-in {
                0% {
                    transform: translateY(50%);
                    opacity: 0;
                }
                100% {
                    transform: translateY(-50%);
                    opacity: 1;
                }
            }
            @keyframes fold-out {
                0% {
                    transform: translateY(-50%);
                    opacity: 1;
                }
                100% {
                    transform: translateY(50%);
                    opacity: 0;
                }
            }

            .title{
                font-size: 34 *@pad-radio;
                // font-size: 30 *@pad-radio;
                color: #333333;
                font-weight: bold;
            }

            .rule-list{
               color: #666666;
            //    font-size: 30*@pad-radio;
               font-size: 32*@pad-radio;
               margin-top: 48*@pad-radio;
               margin-bottom: 106*@pad-radio;
               margin-left: 12px;
            }
            .rule-list-item{
                list-style: decimal;
                margin-top: 10 *@pad-radio;
                line-height: 1.5;
            }

            .date{
                margin-bottom: 92 *@pad-radio;
                font-size: 30 *@pad-radio;
            }

            .contacts{
                color: #666666;
                font-size: 30*@pad-radio;
                // font-size: 1.5;
            }
            .contacts > p{
                 line-height: 1.5;
            }
        }
</style>

<template>
	<div class="v-lucky-money-modal">
		<div
			v-show="visible"
			class="mask"
			@click="close"/>
		<transition name="fold">
			<div
				v-show="visible"
				class="modal">
				<div class="modal-header">
					活动规则说明
				</div>
				<div class="modal-body">
					<h4 class="title">
						活动规则：
					</h4>
					<ol
						class="rule-list"
						type="1">
						<li class="rule-list-item">
							活动期间，店员凡介绍一位客户成功测肤，可获得一次现金红包领取资格；
						</li>

						<li class="rule-list-item">
							每一个红包金额为1元-10元不等，红包随机发放，100%现金；
						</li>

						<li class="rule-list-item">
							店员每天可无限次领红包，同一微信ID视为同一客户；
						</li>

						<li class="rule-list-item">
							现金红包直接存入店员微信/支付宝账户，可以用于消费或提现。
						</li>
					</ol>

					<!-- <p class="date">
						<span class="title">活动时间：</span> 2018.7.18—2018.9.18
					</p> -->

					<div class="contacts">
						<p>本活动最终解释权归广州帕克西软件开发有限公司所有</p>
						<p>客服电话：020-82520103</p>
					</div>

				</div>
			</div>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'LuckyMoneyModal',
	props: {
		visible: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},
	data() {
		return {};
	},
	methods: {
		/**
         * 关闭弹框
         * @return {undefined}
         */
		close() {
			this.$emit('update:visible', false); //  sync 双向绑定
		},
	},
};
</script>
